import TodoItem from "./TodoItem";

import { Todo } from ".";

interface TodoContentProps {
  todoList: Todo[];
  removeHandler: (todo: Todo) => void;
  updateHandler: (todo: Todo) => void;
}

function TodoContent(props: TodoContentProps) {
  const { todoList, removeHandler, updateHandler } = props;
  function render(done: boolean) {
    const list = todoList.filter((todo) => todo.done === done);
    return list.map((todo) => {
      return (
        <TodoItem
          todo={todo}
          key={todo.id}
          removeHandler={removeHandler}
          updateHandler={updateHandler}
        ></TodoItem>
      );
    });
  }

  return (
    <>
      <div className="unfinished">
        <p>未完成</p>
        <div className="todo-content">{render(false)}</div>
      </div>
      <div className="finished">
        <p>已完成</p>
        <div className="todo-content">{render(true)}</div>
      </div>
    </>
  );
}

export default TodoContent;
